<template>
    <div class="ivu-mt">
        <div class="ivu-title">
            <row type="flex" justify="center" align="middle">
                <Col span="8">
                    <h3>治疗统计</h3>
                </Col>
                <Col span="16" class="ivu-text-right">
                    <RadioGroup v-model="visitType" type="button" class="ivu-mr-8" @on-change="handleChangeVisitType">
                        <Radio label="day">今日</Radio>
                        <Radio label="month">本月</Radio>
                        <Radio label="year">全年</Radio>
                    </RadioGroup>
                    <DatePicker v-model="visitDate" type="daterange" placement="bottom-end"
                                @on-change="getTreatmentReports" placeholder="日期选择" style="width: 200px"></DatePicker>
                </Col>
            </row>
        </div>
        <base-info @changeStatus="changeStatus" :baseData="reportShow"></base-info>
        <Row :gutter="24" v-if="false">
            <Col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="ivu-mb">
                <Card :bordered="false" dis-hover v-height="480">
                    <div slot="title">
                        <Avatar icon="ios-pulse" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
                        <span class="ivu-pl-8">治疗统计量</span>
                    </div>
<!--                    <visit-chart ref="visitChart" />-->
                </Card>
            </Col>
        </Row>
        <Card :bordered="false" dis-hover>
            <div slot="title">
                <Avatar icon="md-podium" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
                <span class="ivu-pl-8">治疗频次统计</span>
            </div>
            <Button slot="extra" type="primary" @click="exportextra">导出</Button>
            <Table row-key="id" :max-height="540" size="small" ref="table" :columns="columns" :data="data" :loading="loading"></Table>
        </Card>
    </div>
</template>
<script>
    import baseInfo from './base-info';
    // import visitChart from './visit-chart';
    // import frequency from './frequency';
    import util from '@/libs/util';
    import { mapState } from "vuex";
    import { GetTreatmentReport } from '@api/treatment'
    import { formatWithYear, getThisDate, getMonthDays } from '@/utils/datetime';

    import dayjs from 'dayjs'
    export default {
        name: 'dashboard-monitor',
        computed: {
            ...mapState("admin/menu", ["currentProject"]),
        },
        components: { baseInfo },
        data () {
            return {
                loading: false,
                visitType: 'day', // day, month, year
                visitDate: [(new Date()), (new Date())],
                reportShow: {
                    total_user_number: 0,
                    total_times_number: 0,
                    buy_number: 0,
                    clinic_number: 0
                },
                show: false,
                nowDayTime: '',
                nowMonthOn: '',
                nowMonthOff: '',
                nowYearOn: '',
                nowYearOff: '',
                columns: [
                    {
                        title: '项目',
                        key: 'clinic_project_name',
                        minWidth: 170,
                        tree: true
                    },
                    {
                        title: '诊室',
                        minWidth: 122,
                        key: 'clinic_name'
                    },
                    {
                        title: '治疗人数',
                        minWidth: 122,
                        key: 'treament_patient_num'
                    },
                    {
                        title: '治疗人次',
                        minWidth: 122,
                        key: 'treament_patient_times_num'
                    },
                    {
                        title: '治疗量',
                        minWidth: 122,
                        key: 'treament_clinic_num'
                    },
                    {
                        title: '购买量',
                        minWidth: 122,
                        key: 'buy_clinic_num'
                    },
                    {
                        title: '购买人数',
                        minWidth: 122,
                        key: 'buy_patient_num'
                    },
                    {
                        title: '人均购买',
                        minWidth: 122,
                        key: 'buy_use_num'
                    },
                    {
                        title: '治疗频率',
                        minWidth: 122,
                        key: 'treament_rate'
                    },
                    {
                        title: '人均用量',
                        minWidth: 122,
                        key: 'treament_use_num'
                    },
                ],
                data: []
            }
        },
        created () {
            // this.getTreatmentReports();
            this.getNowDay()
        },
        mounted () {
            this.getLoad()
        },
        methods: {
            getNowDay () {
                const now = new Date()
                const nowMonth = now.getMonth()
                const nowYear = now.getFullYear()
                this.nowDayTime = now
                this.nowMonthOn = new Date(nowYear, nowMonth, 1)
                this.nowMonthOff = new Date(nowYear, nowMonth + 1, 0)
                this.nowYearOn = new Date(nowYear, 0, 1)
                this.nowYearOff = new Date(nowYear, 11, getMonthDays(nowYear, 11));
            },
            exportextra() {
                // let token = util.cookies.get('token');
                // token=${token}&
                let url = `${process.env.VUE_APP_API}/v1/clinic/treatment-manage/report-excel?project_id=${this.currentProject}&start_time=${this.getConfig().start_time}&end_time=${this.getConfig().end_time}`
                window.open(url)
            },
            getTreatmentReports (e) {
                this.bindTime(e)
                // const params = {
                //     start_time: this.formDate(this.visitDate[0]),
                //     end_time: this.formDate(this.visitDate[1])
                // }
                // GetTreatmentReport(params).then((res) => {
                //     this.reportShow = {
                //         total_user_number: res.total_user_number,
                //         total_times_number: res.total_times_number,
                //         buy_number: res.buy_number,
                //         clinic_number: res.clinic_number
                //     }
                //     this.$refs.visitChart.handleGetData(res.clinic_data);
                // }).catch(() => {
                // })
                this.getLoad()
            },
            // 参数
            getConfig () {
                return {
                    start_time: this.visitDate[0] !== '' ? dayjs(this.visitDate[0]).format('YYYY-MM-DD') : '',
                    end_time: this.visitDate[1] !== '' ? dayjs(this.visitDate[1]).format('YYYY-MM-DD') : ''
                }
            },
            // 获取表格数据
            getLoad () {
                this.loading = true
                const config = this.getConfig()
                GetTreatmentReport(config).then(res => {
                    this.data = res.list
                    this.reportShow.total_user_number = res.all_treament_patient_num || 0
                    this.reportShow.total_times_number = res.tmp_treament_patient_num || 0
                    this.reportShow.buy_number = res.tmp_buy_num || 0
                    this.reportShow.clinic_number = res.tmp_treament_num || 0
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            // 上方人数点击切换表格数据
            changeStatus (num) {
                console.log(num)
            },
            // 时间交互联动
            bindTime (e) {
                if (!e) return false
                const startTime = e[0] || ''
                const endTime = e[1] || ''
                const nowDay = dayjs(this.nowDayTime).format('YYYY-MM-DD')
                const nowMonthStart = dayjs(this.nowMonthOn).format('YYYY-MM-DD')
                const nowMonthEnd = dayjs(this.nowMonthOff).format('YYYY-MM-DD')
                const nowYearStart = dayjs(this.nowYearOn).format('YYYY-MM-DD')
                const nowYearEnd = dayjs(this.nowYearOff).format('YYYY-MM-DD')
                if (startTime === nowDay && endTime === nowDay) {
                    this.visitType = 'day'
                } else if (startTime === nowMonthStart && endTime === nowMonthEnd) {
                    this.visitType = 'month'
                } else if (startTime === nowYearStart && endTime === nowYearEnd) {
                    this.visitType = 'year'
                } else {
                    this.visitType = ''
                }
            },
            handleChangeVisitType (val) {
                if (val) {
                    this.visitDate = getThisDate(val);
                }
                this.getTreatmentReports();
            },
            // 监听页面宽度变化，刷新表格
            handleResize () {
                this.$refs.visitChart.handleResize();
            },
            formDate (date) {
                return formatWithYear(date, '-')
            }
        }
    }
</script>
<style lang="less" scoped>
    .dashboard-console-visit{
        .ivu-radio-group-button .ivu-radio-wrapper{
            border: none !important;
            box-shadow: none !important;
            padding: 0 12px;
        }
        .ivu-radio-group-button .ivu-radio-wrapper:before, .ivu-radio-group-button .ivu-radio-wrapper:after{
            display: none;
        }
    }
    .ivu-mt-64 {
        margin-top:64px;
    }
    .ivu-title {
        margin-bottom:20px;
    }
    .ivu-title h3{
        font-size:16px;
    }
    /deep/ .ivu-table-cell-tree {
        text-align: center;
        .ivu-icon {
            vertical-align: middle;
        }
    }
</style>
